/**
 * desc:modal层展示商品信息列表html
 * @item {obj} 商品的信息
 * @type {string} 1:单个商品 2：组合商品
 * @onClick {func} 点击查看组合商品详情
 * @handleClick {func} 点击匹配
 *
 */
import React from 'react';
import { Button, Empty, Tooltip } from 'antd';
import CommonPage from '@/components/CommonPagination';
import styles from './index.module.less';
import CommonGoodsImg from '@/components/CommonGoodsImg';
import CommonZjfImg from '@/components/CommonImg/ZifComponent';
import { formatAmount, openUrl } from '@/utils/utils.jsx';

export default ({ type = '1', item, handleChange, handleClick, onClick }) => {
  const pagination = {
    current: item.current || 1,
    pageSize: item.size || 5,
    total: item.total || 0,
    size: 'small',
    hideOnSinglePage: true,
    showSizeChanger: false,
  };

  if (item.records) {
    if (item.records.length > 0) {
      if (type == 1) {
        return (
          <>
            <div className={styles.wrapBox}>
              {item.records.map((v, index) => (
                <div
                  className={styles.wrap}
                  key={index}
                  style={{
                    borderTop: index == 0 ? 'none' : '1px solid #F0F0F0',
                  }}
                >
                  {/*                   <CommonGoodsImg
                    img={v.goodsImage}
                    storeId={v.storeId}
                    goodsId={v.goodsId}
                    width="64"
                    size="64x64"
                  /> */}
                  <CommonZjfImg
                    img={v.goodsImage}
                    storeId={v.storeId}
                    size="64"
                    isCloudIcon={v.isCarefullySelected}
                  />
                  <div className={styles.section}>
                    <div>
                      <Tooltip title={v.goodsName}>
                        <div
                          style={{ width: '100%' }}
                          onClick={() => openUrl(`${GOODS_HREF}${v.goodsId}`)}
                          className="textOverflowMultiTwo common-color2"
                        >
                          {v.goodsName}
                        </div>
                      </Tooltip>
                    </div>
                    <div className={styles.msgBox}>
                      <Tooltip title={v.size}>
                        <span
                          style={{ marginRight: '40px', maxWidth: '200px' }}
                          className="text-overflow"
                        >
                          尺码：{v.size}
                        </span>
                      </Tooltip>
                      <Tooltip title={v.color}>
                        <span
                          style={{ maxWidth: '200px' }}
                          className="text-overflow"
                        >
                          颜色：{v.color}
                        </span>
                      </Tooltip>
                    </div>
                    <div>
                      <span>
                        价格：
                        <span className="common-color9">
                          ￥
                          {((v.vipPrice || v.vipPrice == 0) && (v.vipPrice < v.goodsPrice))
                            ? formatAmount(v.vipPrice)
                            : formatAmount(v.goodsPrice)}
                        </span>
                      </span>
                      <span style={{ marginLeft: '40px' }}>
                        数量：{v.goodsStorage} 个
                      </span>
                    </div>
                  </div>
                  <Button
                    onClick={() => handleClick(v.goodsId)}
                    className={styles.button}
                  >
                    匹配
                  </Button>
                </div>
              ))}
            </div>
            <div style={{ textAlign: 'right', marginTop: '16px' }}>
              <CommonPage pagination={pagination} handleChange={handleChange} />
            </div>
          </>
        );
      } else {
        return (
          <>
            <div className={styles.wrapBox}>
              {item.records.map((v, index) => (
                <div
                  className={styles.wrap}
                  key={index}
                  style={{
                    borderTop: index == 0 ? 'none' : '1px solid #F0F0F0',
                  }}
                >
                  <img
                    onClick={() => onClick(v.id)}
                    className={styles.img}
                    style={{ cursor: 'pointer' }}
                    src={`${v.composeImage}`}
                  />
                  <div className={styles.section}>
                    <div
                      onClick={() => onClick(v.id)}
                      className="textOverflowMultiTwo common-color2"
                    >
                      {v.composeName}
                    </div>
                    <div className={styles.msgBox}>
                      <span>
                        价格：
                        <span className="common-color9">
                          ￥{formatAmount(v.composePrice)}
                        </span>
                      </span>
                    </div>
                  </div>
                  <Button
                    onClick={() => handleClick(v.id)}
                    className={styles.button}
                  >
                    匹配
                  </Button>
                </div>
              ))}
            </div>
            <div style={{ textAlign: 'right', marginTop: '16px' }}>
              <CommonPage pagination={pagination} handleChange={handleChange} />
            </div>
          </>
        );
      }
    }
    return <Empty description="未查询到符合条件的商品" />;
  } else {
    return (
      <div className={styles.result} style={{ color: '#FF7A23' }}>
        {type == '1'
          ? '点击上方查询按钮或输入商品链接搜索商品'
          : '点击上方查询按钮搜索组合商品'}
      </div>
    );
  }
};
